<template>
  <div
    class="DColumnChart"
    :id="ids"
    :chartType="chartType"
    :chartDataY="chartDataY"
    :chartDataX="chartDataX"
    :titleText="titleText"
    :backgroundColor="backgroundColor"
    :style="{ height: height, width: width }"
    :textStyle="{ color: textStyle.color, fontSize: textStyle.fontSize }"
    :gridValue="{
      top: gridValue.top,
      right: gridValue.right,
      left: gridValue.left,
      bottom: gridValue.bottom
    }"
    :axisLabelX="{ margin: axisLabelX.margin, color: axisLabelX.color }"
    :nameValue="nameValue"
    :axisLabelYColor="axisLabelYColor"
    :titleScale="titleScale"
    :columnBackground="columnBackground"
    :columnWidth="columnWidth"
    :zeroGradient="zeroGradient"
    :oneGradient="oneGradient"
    :barBorderRadiusValue="barBorderRadiusValue"
    :shadowColorValue="shadowColorValue"
    :shadowBlurValue="shadowBlurValue"
    :lineStyleX="lineStyleX"
  ></div>
</template>
<script>
export default {
  name: "DColumnChart",
  data () {
    return {
      ids: this.generatorOnlyId(),
      chartHeight: "500px",
      chartWidth: "1000px"
    }
  },
  props: {
    id: {
      type: String,
      default: ""
    },
    chartType: {
      type: String,
      default: "column"
    },
    chartDataY: {
      type: [Array, Object],
      default () {
        return null;
      }
    },
    chartDataX: {
      type: Array,
      default () {
        return null
      }
    },
    titleText: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "260px"
    },
    backgroundColor: {
      type: String,
      default: ""
    },
    textStyle: {
      type: Object,
      default () {
        return {
          color: "#ffffff",
          fontSize: 16
        }
      },
    },
    gridValue: {
      type: Object,
      default () {
        return {
          top: '15%',
          right: '3%',
          left: '8%',
          bottom: '12%'
        }
      }
    },
    lineStyleX: {
      type: String,
      default: 'rgba(255,255,255,0.0)'
    },
    axisLabelX: {
      type: Object,
      default () {
        return {
          margin: 10,
          color: '#e2e9ff',
        }
      }
    },
    nameValue: {
      type: String,
      default: ""
    },
    axisLabelYColor: {
      type: String,
      default: '#e2e9ff'
    },
    titleScale: {
      type: String,
      default: "rgba(255,255,255,1)"
    },
    scaleStyle: {
      type: String,
      default: 'rgba(255,255,255,0.12)'
    },
    columnBackground: {
      type: String,
      default: 'rgba(255,255,255,0)'
    },
    columnWidth: {
      type: String,
      default: '25%'
    },
    zeroGradient: {
      type: String,
      default: 'rgba(0,244,255,1)'
    },
    oneGradient: {
      type: String,
      default: 'rgba(0,77,167,1)'
    },
    barBorderRadiusValue: {
      type: Array,
      default () {
        return [30, 30, 30, 30]
      }
    },
    shadowBlurValue: {
      type: Number,
      default: 4
    },
    shadowColorValue: {
      type: String,
      default: 'rgba(0,160,221,0)'
    }
  },

  watch: {},
  // 1.先创建需要渲染盒子的宽高
  created () {
    this.generatorWithAndHeight();
  },
  // 2.再创建渲染图形
  mounted () {
    this.drawChart();
  },

  methods: {
    // 生成图表的唯一ID
    generatorOnlyId () {
      return (
        this.id +
        this.$moment().format("YYYYMMDDHHmmssSSS") +
        Math.floor(Math.random() * 10000)
      );
    },
    // 生成渲染图表div的宽度与高度
    generatorWithAndHeight () {
      this.chartWidth = `${this.width ? this.width : document.body.offsetWidth * 0.8}px`;
      this.chartHeight = `${this.height ? this.height : document.body.offsetHeight * 0.6}px`;
    },
    // 绘制图表
    drawChart () {
      let myChart = this.$echarts.init(document.getElementById(this.ids));
      // 判断初始化是否成功，如失败，则输出错误
      if (myChart === undefined || myChart === null || myChart === "") {
        console.error(`echarts init dom id ${this.id} failed`);
        return;
      }
      /* 抽离柱状公共配置项 */
      this.optionColumnar()
      // 判断图表类型，根据图表类型渲染不同的图表
      switch (this.chartType) {
        case "column":
          myChart.setOption(this.columnChartOption());
          break;
        case "analogy":
          myChart.setOption(this.analogyChartOption());
          break;
        default:
          console.error(`chartType ${this.chartType} is invalid`);
          break;
      }

      let self = this;
      let work = null;
      window.addEventListener("resize", function () {
        self.generatorWithAndHeight(); // self设置当前图形的高度
        if (work == null) {
          // 可视窗口大小改变的时候触发
          work = setTimeout(function () {
            myChart.resize();
            work = null;
          }, 100);
        }
      });

    },
    optionColumnar () {
      let that = this;
      // 标题配置项
      that.optionTitle = {
        text: this.titleText,
        left: "center",
        textStyle: {
          color: this.textStyle.color,
          fontSize: this.textStyle.fontSize
        }
      }
      // 布局配置项
      that.optionGrid = {
        top: this.gridValue.top,
        right: this.gridValue.right,
        left: this.gridValue.left,
        bottom: this.gridValue.bottom,
        containLabel: true
      }
    },
    /* 默认柱状图 */
    columnChartOption () {
      return {
        backgroundColor: this.backgroundColor,
        title: this.optionTitle,
        tooltip: { // 鼠标悬停显示数值
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: this.optionGrid,
        xAxis: {
          type: "category",
          data: this.chartDataX,
          axisLine: {
            lineStyle: {
              color: this.lineStyleX
            }
          },
          axisLabel: {
            margin: this.axisLabelX.margin,
            color: this.axisLabelX.color,
            textStyle: {
              fontSize: 14
            },
          },
        },
        yAxis: {
          type: "value",
          name: this.nameValue,
          axisLabel: {
            formatter: '{value}',
            color: this.axisLabelYColor,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: this.titleScale
            }
          },
          splitLine: {
            lineStyle: {
              color: this.scaleStyle
            }
          }
        },
        series: [
          {
            data: this.chartDataY,
            type: "bar",
            showBackground: true,
            barWidth: this.columnWidth,
            backgroundStyle: {
              color: this.columnBackground
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: this.zeroGradient // 0% 处的颜色
                }, {
                  offset: 1,
                  color: this.oneGradient // 100% 处的颜色
                }], false),
                barBorderRadius: this.barBorderRadiusValue,
                shadowColor: this.shadowColorValue,
                shadowBlur: this.shadowBlurValue,
              }
            },
          }
        ]
      };
    },
    /* 类比柱状图 */
    analogyChartOption () {

      return {
        backgroundColor: this.backgroundColor,
        title: this.optionTitle,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['直接访问', '邮件营销', '联盟广告']
        },
        grid: this.optionGrid,
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            data: [320, 332, 301]
          },
          {
            name: '邮件营销',
            type: 'bar',
            data: [120, 132, 101]
          },
          {
            name: '联盟广告',
            type: 'bar',
            data: [220, 182, 191]
          }
        ]
      }
    }
  }
};
</script>